<template>
  <div class="continer">
    <div class="home_pages">
      <div class="person_contents">
        <div class="person_contents_img">
          <img :src="Obj.DisplayHeader" />
        </div>
        <div class="person_informatons">
          <div class="full_name">{{ Obj.Name || "limeimei" }}</div>
          <div class="Edad Ages">18岁</div>
          <div class="Edad Constelación">双子座</div>
        </div>
        <div class="peron_ico">
          <div @click="Gold_recharge(6,Obj.Gold)">
            <div class="full_name_imgs">
              <img src="../assets/personal/Goldcoins.png" />
            </div>
            <div class="list_text">{{ Obj.Gold || "10" }}</div>
          </div>
          <div @click="Upgrade_members(7)">
            <div class="full_name_imgs">
              <img src="../assets/personal/member.png" />
            </div>
            <div class="list_text birth_day">
              {{ Birthday || "2020-01-01" }}
            </div>
          </div>
          <div @click="Buy_translation(8,Obj.CharacterCount)">
            <div class="full_name_imgs">
              <img src="../assets/personal/translate.png" />
            </div>
            <div class="list_text">{{ Obj.CharacterCount || "66" }}</div>
          </div>
        </div>
      </div>
      <!-- 好友动态 -->
      <div class="friend_dynamic">
        <div class="friend_content">
          <!-- list_id -->
          <div class="list" @click="list_dynamic(1)">
            <div>
              <img
                :src="
                  list_id == 1
                    ? require('../assets/personal/dyn_able.png')
                    : require('../assets/personal/dyn_unable.png')
                "
              />
            </div>
            <div :class="list_id == 1 ? 'list_selected' : ''">好友动态</div>
          </div>
          <!-- //2 -->
          <div class="list" @click="list_visitor(2)">
            <div>
              <img
                :src="
                  list_id == 2
                    ? require('../assets/personal/visitor_able.png')
                    : require('../assets/personal/visitor_unable.png')
                "
              />
            </div>
            <div :class="list_id == 2 ? 'list_selected' : ''">我的访客</div>
          </div>
          <!-- 3 -->
          <div class="list" @click="list_Myvisitor(3)">
            <div>
              <img
                :src="
                  list_id == 3
                    ? require('../assets/personal/myDynamic_able.png')
                    : require('../assets/personal/myDynamic_unable.png')
                "
              />
            </div>
            <div :class="list_id == 3 ? 'list_selected' : ''">我的动态</div>
          </div>
          <!-- 4 -->
          <div class="list" @click="list_Mevisitor(4)">
            <div>
              <img
                :src="
                  list_id == 4
                    ? require('../assets/personal/thumb_able.png')
                    : require('../assets/personal/thumb_unable.png')
                "
              />
            </div>
            <div :class="list_id == 4 ? 'list_selected' : ''">点赞我的</div>
          </div>
          <!--5  -->
          <div class="list" @click="list_mythumb(5)">
            <div>
              <img
                :src="
                  list_id == 5
                    ? require('../assets/personal/meThumb_able.png')
                    : require('../assets/personal/meThumb_unable.png')
                "
              />
            </div>
            <div :class="list_id == 5 ? 'list_selected' : ''">我的点赞</div>
          </div>
        </div>
      </div>
      <!-- 联系客服 -->
      <div class="customerService" @click="customer_server">
        <div class="custom_content">
          <img src="../assets/personal/customerService.png" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//index.vue
import {
  getYongHuInfo,
  getAllList,
  getVisitorMyList,
  getMyList,
  getMyLikeDataList,
  getList,
} from "../utils/http.js";
export default {
  name: "chat",
  data: () => ({
    list_id: 1,
    imgsrc: "../assets/personal/dyn_able.png",
    Obj: {},
    //vuex传值
    user_id: "",
    visitor_id: "",
    mevisitor_id: "",
    mythumb_id: "",
  }),
  mounted() {
    // layer.load(0, {
    //       shade: false
    //     }); //0代表加载的风格，支持0-2
    let param = {
      Name: "HUDIE123456",
    };
    this.getPage();
  },
  methods: {
    getPage() {
      var param = {
        Name: "limeimei",
        Password: "ts19608325",
        // 当前页的条数
        Page: 1,
        Language: "zh-cn",
      };
      // getList(param).then((res) => {
      //获取用户信息接口
      getYongHuInfo(param).then((res) => {
        this.Obj = res.Obj;
      });
      //我的动态列表接口
      getMyList(param).then((res) => {
        console.log(res);
        // layer.closeAll()
        // 例子：
        this.myDynamic = res.Obj.List;
      });
      //我的点赞  点赞我的列表接口
      getMyLikeDataList(param).then((res) => {
        this.likeDataList = res.Obj.List;
        // console.log(res)
      });
      // });
    },

    // getVipInfoMessage(param).then
    // 好友动态
    list_dynamic(val) {
      this.getPage();
      this.list_id = val;
      this.$store.commit("user/Set_User_Id", this.user_id);
      this.$emit("list_dynamic", val);
    },
    //我的访客
    list_visitor(val) {
      this.getPage();
      this.list_id = val;
      // commit 是调用刚才存储值的方法（固定用法）
      // val 就是需要存储的值
      this.$store.commit("user/Set_User_Id", this.visitor_id);
      this.$emit("list_visitor", val);
    },
    //我的动态
    list_Myvisitor(val) {
      this.getPage();
      this.list_id = val;
      this.$store.commit(
        "user/Set_User_Id",
        this.myDynamic.map((item) => {
          return {
            ...item,
            show: false,
          };
        })
      );
      this.$emit("list_Myvisitor", val);
    },
    //点赞我的
    list_Mevisitor(val) {
      this.getPage();
      this.list_id = val;
      this.$store.commit("user/Set_User_Id", this.mevisitor_id);
      this.$emit("list_Mevisitor", val);
    },
    //我的点赞
    list_mythumb(val) {
      this.getPage();
      this.list_id = val;
      this.$store.commit("user/Set_User_Id", this.mythumb_id);
      this.$emit("list_mythumb", val);
    },
    //金币充值
    Gold_recharge(val,gold_value) {
      this.$emit("Gold_recharge", val,gold_value);
    },   
    //会员升级
    Upgrade_members(val) {
      this.$emit("Upgrade_members", val);
    },
    //购买翻译包
    Buy_translation(val,CharacterCount_value) {
      this.$emit("Buy_translation", val,CharacterCount_value);
    },
    customer_server() {
      this.$emit("customer_server");
    }
  },
  computed: {
    Birthday: function () {
      return this.Obj.Birthday ? this.Obj.Birthday.slice(0, 9) : "2020-01-01";
    },
  },
};
</script>
<style>
html {
  background-color: #eff2fc;
}
</style>
<style scoped  lang="less">
.continer {
  width: 25.5%;
  background-color: #eff2fc;
  // border:1px solid red;
}
.home_pages {
  // width: 16.5%;
  width: 100%;
  // min-width: 19.6rem;
}
.person_contents {
  background-color: #ffffff;
  border-radius: 10px;
}
person_contents_img{
  // width: 280px;
}
.person_contents_img img{
  width: 318px;
  height: 200px;
  border-radius: 10px 10px 0px 0px;
}
.person_informatons {
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  text-align: center;
}
.full_name {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #0e0e0e;
}
.Edad {
  background: #eff2fc;
  opacity: 0.8;
  border-radius: 6px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  padding: 0.2rem 0.3rem;
}
.Ages {
  margin-left: 1.5rem;
  margin-right: 1rem;
}
.peron_ico {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-around;
}
.peron_ico img {
  width: 3rem;
  height: 3rem;
}
.list_text {
  position: relative;
  bottom: 15px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #666666;
}
.birth_day {
  font-size: 12px !important;
  font-family: PingFang SC;
  font-weight: 400 !important;
  color: #999999 !important;
}
.friend_dynamic {
  width: 100%;
  margin-top: 10px;
  border-radius: 10px;
  background-color: #ffffff;
  padding-bottom: 15px;
  padding-top: 15px;
}
.friend_content {
  width: 72%;
  margin: 0 auto;
}
.list {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 3.5rem;
}
.list_selected {
  color: #4064e3;
}
.list img {
  margin-right: 1rem;
  width: 1.2rem;
  height: 1.2rem;
}
.customerService {
  margin-top: 10px;
  border-radius: 10px;
  background-color: #ffffff;
}
.custom_content {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5px;
  padding-top: 5px;
}
</style>  